<template>
    <div class="pui-table">
     <table>
       <thead>
         <tr>
           <th v-for="column in columns"
               :key="column.field"
               :style="{ width: column.width }"
           >
             {{ column.label }}
           </th>
         </tr>
       </thead>
       <tbody>
         <tr v-for="(row, index) in data" :key="index" :class="{ 'stripe': stripe && index % 2 === 1 }">
           <td v-for="column in columns" :key="column.field">{{ row[column.field] }}</td>
         </tr>
       </tbody>
 </table>
 </div>
 </template>
 
 <script>
 import { defineComponent } from 'vue'
 export default defineComponent({
     name: "pui-table",
     props: {
       columns: {
       type: Array,
       required: true
     },
     data: {
       type: Array,
       required: true
     },
     stripe: {
       type: Boolean,
       default: true
     },
     autoWidth: {
       type: Boolean,
       default: false
     }
     },
     setup(props, ctx) {
       
  
     },
   
   })
 </script>
 
 <style scoped>
 .pui-table {
   width: 100%;
 }
 
 .pui-table table {
   border-collapse: collapse;
   width: 100%;
 }
 
 .pui-table th,
 .pui-table td {
   border: 1px solid #D4D7DE;
   padding: 13px;
   text-align: left;
 }
 
 .pui-table th {
   background-color: #eee;
 }
 
 .pui-table .stripe td {
   background-color: #f9f9f9;
 }
 </style>
         
 